<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../css/public.css">
  <link rel="stylesheet" href="../../css/index.css">
  <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="../../js/config.js"></script>
  <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="header">
              <span>师资概况</span>
              <span>图标</span>
            </div>
            <div class="tab">
              <span class="active">学院</span>
              <span>系部</span>
              <span>专业</span>
            </div>
            <div class="content">
                <div class="echartsBox">
                    <div class="title">全校授课教师分类数量及占比</div>
                    <div id="echarts1" style="width: 100%;height:360px;"></div>
                </div>
                <div class="echartsBox">
                    <div class="title">全校授课教师分类历年变化趋势</div>
                    <div id="echarts2" style="width: 100%;height:360px;"></div>
                </div>
            </div>
        </div>
        <div class="box">
          <div class="header">
            <span>高层次人才</span>
          </div>
          <div class="tab">
            <span class="active">学院</span>
            <span>系部</span>
            <span>专业</span>
          </div>
          <div class="content">
              <div class="echartsBox">
                  <div class="title">全校授课教师分类数量及占比</div>
                  <div id="echarts3" style="width: 100%;height:360px;"></div>
              </div>
              <div class="echartsBox">
                  <div class="title">全校授课教师分类历年变化趋势</div>
                  <div id="echarts4" style="width: 100%;height:360px;"></div>
              </div>
          </div>
      </div>
    </div>
</body>

</html>
<script src="../layui/layui.all.js"></script>
<script>
  //JavaScript代码区域
  layui.use('element', function () {
    var element = layui.element;
    var $ = layui.jquery;
    $('.tab span').on('click', function() {
      var index = $(this).index();
      $(this).parent().children('span').eq(index).addClass('active').siblings('span').removeClass('active')
    })
    $.ajax({
      url:$.baseUrl + '/findAllData',
      method:'get',
      success:function(data) {
        data.data.forEach((item, index)=> {
          option1.series[0].data[index].value = item.teacherName
        })
        myChart.setOption(option1);
      }
    })
    //   alert(123)
  });

  // 图标初始化
  var myChart = echarts.init(document.getElementById('echarts1'));
  var option1 = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      bottom: 0,
      left: 'center',
      data: ['非任课老师', '校内兼课老师', '校内专任老师']
    },
    series: [
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [
          {
            value: 1548,
            name: '非任课老师',
            itemStyle: {
              color: '#2593FC'
            }
          },
          {
            value: 0,
            name: '校内兼课老师',
            itemStyle: {
              color: '#27C2C1'
            }
          },
          {
            value: 0,
            name: '校内专任老师',
            itemStyle: {
              color: '#38C060'
            }
          }
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
 

  var myChart2 = echarts.init(document.getElementById('echarts2'));
  var option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      bottom: 0,
      data: ['非任课老师', '校内兼课老师', '校内专任老师']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2018-2019', '2017-2018', '2016-2017', '2015-2016', '2014-2105']

    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '非任课老师',
        type: 'bar',
        stack: '总量',
        barWidth: 30,
        itemStyle: {
          color: '#2593FC'
        },
        data: [320, 302, 301, 334, 390]
      },
      {
        name: '校内兼课老师',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          color: '#27C2C1'
        },
        data: [120, 132, 101, 134, 90]
      },
      {
        name: '校内专任老师',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          color: '#38C060'
        },
        data: [220, 182, 191, 234, 290]
      }
    ]
  };
  myChart2.setOption(option2);

  var myChart3 =  echarts.init(document.getElementById('echarts3'));
  var option3 = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            bottom: 10,
            data: ['非任课老师', '校内兼课老师', '校内专任老师']
        },
        series: [{
            type: 'pie',
            radius: 80,
            center: ['25%', '50%'],
            data: [
                {
                value: 158,
                name: '非任课老师',
                itemStyle: {
                  color: '#2593FC'
                }
              },
              {
                value: 100,
                name: '校内兼课老师',
                itemStyle: {
                  color: '#27C2C1'
                }
              },
              {
                value: 200,
                name: '校内专任老师',
                itemStyle: {
                  color: '#38C060'
                }
              }
            ]
        }, {
            type: 'pie',
            radius: 80,
            center: ['75%', '50%'],
            data: [
                {
                value: 158,
                name: '非任课老师',
                itemStyle: {
                  color: '#2593FC'
                }
              },
              {
                value: 180,
                name: '校内兼课老师',
                itemStyle: {
                  color: '#27C2C1'
                }
              },
              {
                value: 50,
                name: '校内专任老师',
                itemStyle: {
                  color: '#38C060'
                }
              }
            ]
        }]
    };
  myChart3.setOption(option3);

  var myChart4 =  echarts.init(document.getElementById('echarts4'));
  var option4 = {
      xAxis: {
          type: 'category',
          data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
      }]
  };
  myChart4.setOption(option4);
</script>